<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 21:45:14
=======
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:52:12
>>>>>>> 9412502b99b728a658dcbd89e9bfe2e3bf5302b5
-->
<template>
  <div ref="buttom4" style="height: 95%"></div>
</template>
<script>
import { Liquid } from '@antv/g2plot';
export default {

  mounted(){
    this.initChart()
  },
   methods:{
    initChart(){
      const liquidPlot = new Liquid(this.$refs.buttom4, {  
        percent: 0.66,
        style:{
          FontSize:12,
        },
        shape: (x, y, width, height) => {
          const path = [];
          const w = Math.min(width, height);

          for (let i = 0; i < 5; i++) {
            path.push([
              i === 0 ? 'M' : 'L',
              (Math.cos(((18 + i * 72) * Math.PI) / 180) * w) / 2 + x,
              (-Math.sin(((18 + i * 72) * Math.PI) / 180) * w) / 2 + y,
            ]);
            path.push([
              'L',
              (Math.cos(((54 + i * 72) * Math.PI) / 180) * w) / 4 + x,
              (-Math.sin(((54 + i * 72) * Math.PI) / 180) * w) / 4 + y,
            ]);
          }
          path.push(['Z']);
          return path;
        },
        outline: {
          border: 1,
          distance: 1,
          style: {
            stroke: '#FFC100',
            strokeOpacity: 150,
          },
        },
        wave: {
          length: 128,
        },
        theme: {
          styleSheet: {
            brandColor: '#FAAD14',
          },
        },
      });
      liquidPlot.render();
    }
  }
}
</script>
<style scoped>
  
</style>

